Adding Graphics to a Vue App with D3 — Pie Chart

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Pie Chart

We can add a pie chart with D3 into our Vue app.

For example, we can write:

public/populations.csv

states,percent
California,38.00
New York,18.00
Texas,20.0

App.vue

<template>
  <div id="app">
    <svg width="600" height="400"></svg>
  </div>
</template>
<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(async () => {
      const svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) / 2;

      const g = svg
        .append("g")
        .attr("transform", `translate(${width / 2}, ${height / 2})`);

      const color = d3.scaleOrdinal(["gray", "green", "brown"]);

      const pie = d3.pie().value(function (d) {
        return d.percent;
      });

      const path = d3
        .arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

      const label = d3
        .arc()
        .outerRadius(radius)
        .innerRadius(radius - 80);

      const data = await d3.csv("/populations.csv");

      const arc = g
        .selectAll(".arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "arc");

      arc
        .append("path")
        .attr("d", path)
        .attr("fill", function (d) {
          return color(d.data.states);
        });

      arc
        .append("text")
        .attr("transform", function (d) {
          return `translate(${label.centroid(d)})`;
        })
        .text(function (d) {
          return d.data.states;
        });

      svg
        .append("g")
        .attr("transform", `translate(${width / 2 - 120},20)`)
        .append("text")
        .text("Top population states in the US")
        .attr("class", "title");
    });
  },
};
</script>

<style scoped>
.arc text {
  font: 12px arial;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

.title {
  fill: green;
  font-weight: italic;
}
</style>

We start by getting the svg element and setting the width , height and radius of the pie chart:

const svg = d3.select("svg"),
  width = svg.attr("width"),
  height = svg.attr("height"),
  radius = Math.min(width, height) / 2;

Then we translate the svg by writing:

const g = svg
  .append("g")
  .attr("transform", `translate(${width / 2}, ${height / 2})`);

Next, we add the colors for the pie chart by writing;

const color = d3.scaleOrdinal(["gray", "green", "brown"]);

Then we add the data for the pie chunk by writing:

const pie = d3.pie().value(function(d) {
  return d.percent;
});

Next, we create the arcs for the pie chart by writing

const path = d3
  .arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

Then we create the labels by writing:

const label = d3
  .arc()
  .outerRadius(radius)
  .innerRadius(radius - 80);

Then we read the data from populations.csv :

const data = await d3.csv("/populations.csv");

Then we set the lengths of the arcs with the read data by writing:

const arc = g
  .selectAll(".arc")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "arc");

Then we set the fill color of the pie chunks by writing:

arc
  .append("path")
  .attr("d", path)
  .attr("fill", function(d) {
    return color(d.data.states);
  });

Then we add the text for the pie chunks by writing:

arc
  .append("text")
  .attr("transform", function(d) {
    return `translate(${label.centroid(d)})`;
  })
  .text(function(d) {
    return d.data.states;
  });

And finally, we add the title text for the graph by writing:

svg
  .append("g")
  .attr("transform", `translate(${width / 2 - 120},20)`)
  .append("text")
  .text("Top population states in the US")
  .attr("class", "title");

Now we should see a pie chart displayed.

Conclusion

We can add a pie chart with D3 into our Vue app.